import React from 'react'
import './css/MenuGrid.css'

class MenuGrid extends React.Component { 
 
    config={ 
        menu:[
              {
                "name": "台风",
                "icon": "icon-tf",
                "url": "twcyb.html"
                },
                {
                "name": "灾害警报",
                "icon": "icon-zhyb",
                "url": "twcyb.html"
                } 
        ],
        itemClick:()=>{
            
        }
    }
    componentWillMount = () => {
        if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config); 
    } 
    // did 函数在进入状态之后调用
    componentDidMount = () => {    
  
    }
     

    constructor(props) {
        super(props);
        this.state = {
            liked: 1, 
        };
    }
 
    linkFn=(i)=>{
          this.props.linkFn(i);
    }

    // 输出到页面的内容
    render() {
        let that =this;
        let listH =this.config.height/this.config.col;
        let listW =this.config.width/this.config.row;
        this.config.hasIcon
        return (
            <div className="menugrid" style={{"height":this.config.height,"width":this.config.width}}> 
                    <div className="main"  style={{"height":this.config.height }}> 
                    {
                        that.config.menu.map(function(item,i){  
                            return (
                                <div key={i} onClick={() => that.config.itemClick(i)}  style={{"height":listH,"width":listW}} > 
                                   <div  > 
                                        <img src={item.icon} alt="" style={that.config.menuStyle}/>
                                        <p>{item.name}</p> 
                                   </div>
                                </div>
                                ) 
                        }.bind(this))
                    }
                    </div>
            
                  
             </div>
        )
    }
}

export default MenuGrid


